<template>
  <div class="category-tree">
    <h5>
      分类筛选
      <template v-if="total">（{{ total }}）</template>
    </h5>
    <div style="padding: 10px;">
      <el-input
        class="search-text"
        @input="getCategory"
        v-model="searchText"
        clearable
        placeholder="请输入商品名称筛选"
      />
    </div>
    <el-scrollbar v-loading="loading">
      <div v-if="categoryList.length > 0" class="my-cascader">
        <el-tree
          :data="categoryList"
          show-checkbox
          node-key="id"
          @check-change="handleCheckChange"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>（{{ data.productNumber }}）</span>
          </span>
        </el-tree>
      </div>
      <el-empty v-else description="未查询到分类" :image-size="100"></el-empty>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  name: 'CategoryTree',
  props: ['subMchList', 'productName'],
  data () {
    return {
      loading: false,
      checkAll: false,
      isIndeterminate: true,
      categoryList: [], // 店铺列表
      selcategoryList: [], // 已选择店铺列表
      searchText: '',
      total: 0
    }
  },
  watch: {
    subMchList: {
      handler (n) {
        this.getCategory()
      },
      deep: true
    },
    selcategoryList: {
      immediate: true,
      handler (n) {
        let newVal = n || []
        this.$emit('input', newVal)
        this.$emit('change', newVal)
      },
      deep: true
    }
  },
  methods: {
    handleCheckChange () {
      // 传true会只返回叶子节点的内容
      this.selcategoryList = this.$refs.tree.getCheckedKeys(true)
    },

    // 获取店铺
    getCategory () {
      this.$emit('update:productName', this.searchText)
      this.loading = true
      this.selcategoryList = []
      this.$POST('sot-admin-api/product/category/queryCategoryTreeByModal', {
        status: 1,
        name: this.searchText,
        subMchIds: this.subMchList
      })
        .then(res => {
          if (res.errorCode === '00000') {
            this.categoryList = res.data.list
            this.total = res.data.total
          }
        })
        .finally(_ => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.category-tree {
  :deep(.el-input__inner) {
    border-color: #dcdfe6 !important;
  }
  :deep(.my-cascader) {
    .el-cascader-panel {
      border: none;
    }
    .el-tree-node__content {
      height: 36px;
    }
  }
}
</style>
